<template>
  <wxc-tab-bar :tab-titles="tabTitles"
               :tab-styles="tabStyles"
               title-type="icon"
               @wxcTabBarCurrentTabSelected="wxcTabBarCurrentTabSelected">
    <!-- 第一个页面内容-->
    <div class="item-container" :style="contentStyle">
      <Article @clickCon="click"></Article>
    </div>
    <div class="item-container" :style="contentStyle"><text>游戏</text></div>
    <div class="item-container" :style="contentStyle"><text>推荐</text></div>
  </wxc-tab-bar>
</template>

<style scoped>
  .item-container {
    width: 750px;
    background-color: #f2f3f4;
    align-items: center;
    justify-content: center;
  }
</style>
<script>
  import Article from './components/Article.vue'
  import ArtCon from './components/ArtCon.vue'
  import { WxcTabBar, Utils } from 'weex-ui';
  import Config from './config'
  let stream = weex.requireModule('stream');
  const storage = weex.requireModule('storage')

  export default {
    components: {WxcTabBar, Article},
    data: () => ({
      tabTitles: Config.tabTitles,
      tabStyles: Config.tabStyles,
    }),
    beforeCreate() {
      storage.getItem('pcid', function (res) {
      if (res.data && res.data !== 'undefined') {
        return
      } else {
        storage.setItem('pcid', Math.random().toString(36).substr(2))
      }
      })
    },
    created () {
      const tabPageHeight = Utils.env.getPageHeight();
      // 如果页面没有导航栏，可以用下面这个计算高度的方法
      // const tabPageHeight = env.deviceHeight / env.deviceWidth * 750;
      const { tabStyles } = this;
      this.contentStyle = { height: (tabPageHeight - tabStyles.height) + 120 + 'px' };
    },
    methods: {
      click () {
        console.log('1111')
        this.$router.push('/artcon')
      },
      wxcTabBarCurrentTabSelected (e) {
        console.log('e', e)
        // const index = e.page;
        // this.$router.push('/')
      }
    }
  };
</script>
